<template>
  <div>
    <el-dialog title="新增用户" :visible.sync="showAddCustomerDialog" center width="700px">

      <el-form :model="customerData" :rules="rules" ref="customerData">

<!--        <el-form-item label="头像" :label-width="formLabelWidth">-->
<!--          <el-input v-model="customerData.avatar" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->

        <el-form-item :label="'头像'" :label-width="formLabelWidth">
          <div class="upload_head_img">
            <el-upload :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="upload_picture" class="avatar-uploader" action="">
              <img v-if="customerData.avatar" :src="customerData.avatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickname">
          <el-input v-model="customerData.nickname" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="用户状态" :label-width="formLabelWidth">
          <!-- label为选定时候的值 -->
          <el-radio v-model="customerData.status" :label="'0'">停用</el-radio>
          <el-radio v-model="customerData.status" :label="'1'">启用</el-radio>
        </el-form-item>

<!--        <el-form-item label="创建时间" :label-width="formLabelWidth">-->
<!--          <el-input v-model="customerData.date_added" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="更新时间" :label-width="formLabelWidth">-->
<!--          <el-input v-model="customerData.date_modified" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSubmit">取 消</el-button>
        <el-button type="primary" @click="submitCustomer('customerData')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  /**
   "avatar":"头像",
   "nickname":"昵称",
   "date_added":"创建时间",
   "status":"状态",
   "date_added":"更新时间",
   "date_modified":"更新时间",
   */
  import store from '@/store'
  import {add} from '@/api/thk/customer'
  import {dateFormat} from '@/utils/dateFormat'
  import { client } from '@/utils/alioss'


  export default {
    name: 'addStore',
    data() {
      return {
        showAddCustomerDialog: false,
        formLabelWidth: '130px',
        customerData: {
          avatar: '',
          nickname: '',
          date_added: '',
          status: '1',
          date_modified: '',
        },

        rules: {
          // 昵称必填
          nickname:[
            { required: true, message: '昵称为必填项', trigger: 'blur' },
          ],
        },
      }
    },


    methods: {
      // 判断是否点击了提交
      submitCustomer(customerData){
        this.$refs[customerData].validate((valid) => {
          if (valid) {

            // 添加时间需要生成,在请求接口之前设置
            this.customerData.date_added = dateFormat("YYYY-mm-dd HH:MM:SS", new Date())
            add(store.getters.token,this.customerData).then(result => {
              // 增加成功
              this.showAddCustomerDialog = !this.showAddCustomerDialog
              this.$message.success('增加成功!')
              this.$parent.getCustomerList()
            }).catch(error => {
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },


      cancelSubmit(){
        this.showAddCustomerDialog = !this.showAddCustomerDialog

      },

      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG、PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 1MB!')
        }
        return (isJPG | isPNG) && isLt2M
      },
      upload_picture(file){
        const that = this
        const fileName = 'user-admin_user-picture' + file.file.uid
        client().put(fileName, file.file).then((res) => {
          this.$set(that.customerData, 'avatar', res.url)


          console.log(res.url);
          that.$message.success('头像地址上传成功！')
        }).catch((err) => {
          that.$message.error('头像地址上传失败，原因：' + err)
        })
      },


    }
  }
</script>
